<template>
<view class="content">
	<view class="loginBox">
		<view class="loginTitle">
			<view>忘记密码</view>
			</view>
			<view class="loginInfo">
				<u-form :model="form" :rules="rules" ref="uForm" :error-type="errorType" :border-bottom="false">
					<view class="inputBox">
						<u-form-item class="input-item" label="注册手机号" label-position="top" left-icon="phone"
							prop="mobile" :border-bottom="false">
							<input type="tel" v-model="form.mobile" placeholder="请输入注册手机号" maxlength="11" />
						</u-form-item>
					</view>
					<view class="inputBox">
						<u-form-item class="input-item smsCode" label="验证码" label-position="top" left-icon="email"
							prop="smscode" :border-bottom="false">
							<input type="number" v-model="form.smscode" placeholder="请输入验证码" maxlength="6"></input>
							<u-button class="btn" slot="right" type="warning" @click="sendCode">{{codeTips}}</u-button>
						</u-form-item>
					</view>
					<view class="inputBox">
						<u-form-item class="input-item" label="请设置新密码" label-position="top" left-icon="lock"
							prop="password" :border-bottom="false">
							<input type="text" v-model="form.password" :password="isShowPassword" placeholder="请设置新密码"
								maxlength="12" @input="onKeyInput(form.password)" />
							<view class="showPassword" @click="changePwdStatus">
							<image :src="eyeIcon" mode="aspectFill"></image>
						</view>
					</u-form-item>
				</view>
				<view class="inputBox">
					<u-form-item class="input-item" label="请设置新密码" label-position="top" left-icon="lock"
						prop="rePassword" :border-bottom="false">
						<input type="text" v-model="form.rePassword" :password="isShowPasswordAgain"
							placeholder="请重新输入密码" maxlength="12" />
						<view class="showPassword" @click="changePwdStatusAgain">
							<image :src="eyeIconAgain" mode="aspectFill"></image>
						</view>
					</u-form-item>
				</view>
				<button hover-class="active" :ripple="true" @click="resetPwd">确 定</button>
			</u-form>
		</view>
	</view>
	<u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code>
	<u-toast ref="uToast" />
</view>
</template>

<script>
export default {
  data() {
    return {
      errorType: ["toast"],
      eyeIcon: "../../static/images/eyeclose.png",
      eyeIconAgain: "../../static/images/eyeclose.png",
      isShowPassword: true,
      isShowPasswordAgain: true,
      form: {
        mobile: "",
        smscode: "",
        password: "",
        rePassword: "",
      },
      //验证码提示
      codeTips: "",
      rules: {
        mobile: [
          {
            required: true,
            message: "请输入手机号",
          },
          {
            validator: (rule, value, callback) => {
              return this.$u.test.mobile(value);
            },
            message: "手机号码不正确",
          },
        ],
        smscode: [
          {
            required: true,
            message: "请输入验证码",
          },
          {
            type: "number",
            message: "验证码只能为数字",
          },
        ],
        password: [
          {
            required: true,
            message: "请设置密码",
          },
          {
            pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]+\S{5,12}$/,
            message: "需同时含有字母和数字，长度在6-12之间",
          },
        ],
        rePassword: [
          {
            required: true,
            message: "请确认密码",
          },
          {
            validator: (rule, value, callback) => {
              return value === this.form.password;
            },
            message: "两次输入的密码不相等",
          },
        ],
      },
    };
  },

  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },
  methods: {
    sendCode() {
      let params = {
        mobile: this.form.mobile,
      };
      if (params.mobile == "") {
        this.$u.toast("请输入注册手机号");
        return;
      }
      params = this.$tools.aesEncryptBat(this, params);
      if (this.$refs.uCode.canGetCode) {
        uni.showLoading({
          title: "正在获取验证码",
          mask: true,
        });
        this.$u.api.sendsms_forget(params).then((res) => {
          if (res.status == 200) {
            uni.hideLoading();
            this.$refs.uToast.show({
              title: res.msg,
              type: "default",
              duration: 5000,
            });
            this.$refs.uCode.start();
          } else {
            uni.hideLoading();
            this.$refs.uToast.show({
              title: res.msg,
              type: "default ",
              duration: 2500,
            });
          }
        });
      } else {
        this.$u.toast("倒计时结束后再发送");
      }
    },

    codeChange(text) {
      this.codeTips = text;
    },
    //确认修改
    resetPwd() {
      let form = this.form;
      let params = {
        mobile: form.mobile,
        smscode: form.smscode,
        password: form.password,
      };
      params = this.$tools.aesEncryptBat(this, params);
      this.$refs.uForm.validate((valid) => {
        if (valid) {
          this.$u.api.forgetPassword(params).then((res) => {
            if (res.status == 200) {
              this.$refs.uToast.show({
                title: res.msg,
                type: "default ",
                duration: 1200,
                url: "/pages/login/login",
              });
            } else {
              this.$refs.uToast.show({
                title: res.msg,
                type: "default ",
                duration: 1200,
              });
            }
          });
        } else {
          console.log("验证失败");
        }
      });
    },
    // 修改密码显示图标
    changePwdStatus() {
      this.isShowPassword = !this.isShowPassword;
      if (this.isShowPassword) {
        this.eyeIcon = "../../static/images/eyeclose.png";
      } else {
        this.eyeIcon = "../../static/images/eyeopen.png";
      }
    },
    changePwdStatusAgain() {
      this.isShowPasswordAgain = !this.isShowPasswordAgain;
      if (this.isShowPasswordAgain) {
        this.eyeIconAgain = "../../static/images/eyeclose.png";
      } else {
        this.eyeIconAgain = "../../static/images/eyeopen.png";
      }
    },

    checkData(value) {
      if (value) {
        if (/[\u4E00-\u9FA5]/g.test(value)) {
          console.log("不能输入汉字!");
        }
      }
      callback();
    },

    onKeyInput(value) {
      if (/[\u4E00-\u9FA5]/g.test(value)) {
        this.form.password = null;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  background-color: #fff;
}

.content {
  position: relative;
  padding: 70rpx;

  .loginBox {
    border-radius: 15rpx;
    margin-bottom: 100rpx;
    position: relative;
    z-index: 9;

    .loginTitle {
      font-size: 50rpx;
      letter-spacing: 1rpx;
      font-weight: 600;
      color: #5b5b5b;
      margin-bottom: 30rpx;
    }

    .loginInfo {
      .inputBox {
        position: relative;

        view {
          letter-spacing: 3rpx;
          padding-bottom: 16rpx;

          image {
            position: absolute;
            height: 50%;
            right: 8rpx;
          }
        }

        input {
          height: 80rpx;
          width: 100%;
          border: 1rpx solid #e6e6e6;
          border-radius: 50rpx;
          padding-left: 30rpx;
          font-size: 26rpx;
        }

        .showPassword {
          position: absolute;
          width: 40rpx;
          height: 40rpx;
          text-align: center;
          right: 0;
          bottom: 20rpx;
          margin-right: 20rpx;
        }
      }

      .smsCode {
        position: relative;

        .btn {
          position: absolute;
          right: 0;
          bottom: 16rpx;
        }
      }

      .active {
        transform: translate(1rpx, 1rpx);
      }

      button {
        margin-top: 100rpx;
        font-size: 30rpx;
        color: #fff;
        background-image: linear-gradient(to left, #fc6306 20%, #fe913d 100%);
        border-radius: 60rpx;
      }
    }
  }
}
</style>
